<template>
  <div class="flex flex-wrap gap-4 items-center mb-6">
    <el-input
      v-model="searchProxy"
      placeholder="搜索专家姓名/单位"
      clearable
      style="width: 220px;"
      @clear="handleClear('search')"
      @input="handleInput"
    />
    <el-tree-select
      v-model="fieldProxy"
      class="form-input"
      :data="fields"
      multiple
      filterable
      clearable
      check-strictly
      placeholder="请选择专业领域"
      :props="{ value: 'id', label: 'tagName', children: 'children' }"
      @clear="handleClear('field')"
      @change="handleChange"
      style="width: 180px;"
    />
    <!-- <el-select
      v-model="sortProxy"
      placeholder="排序方式"
      style="width: 140px;"
      @change="handleChange"
    >
      <el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select> -->
    <el-button type="primary" @click="handleReset" class="reset-btn" style="margin-left: 0px;">重置</el-button>
    <el-button type="primary" @click="handleToStatistics" class="reset-btn ml-0" >统计</el-button>

    
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({
  search: String,
  field: String,
  sort: String,
  fields: {
    type: Array,
    default: () => []
  },
  sortOptions: Array,
})

const emit = defineEmits(['update:search', 'update:field', 'update:sort', 'reset', 'change'])

const router = useRouter()

// 使用防抖来处理搜索
let searchTimer = null
const debounceTime = 300

const searchProxy = computed({
  get: () => props.search || '',
  set: v => {
    emit('update:search', v || '')
    emit('change') // 触发变化事件
  }
})

const fieldProxy = computed({
  get: () => props.field,
  set: v => {
    emit('update:field', v)
    emit('change') // 触发变化事件
  }
})

const sortProxy = computed({
  get: () => props.sort,
  set: v => {
    emit('update:sort', v)
    emit('change') // 触发变化事件
  }
})

// 处理输入框的输入事件（带防抖）
const handleInput = (value) => {
  if (searchTimer) {
    clearTimeout(searchTimer)
  }
  searchTimer = setTimeout(() => {
    emit('update:search', value)
    emit('change') // 触发变化事件
  }, debounceTime)
}

// 处理清除事件
const handleClear = (field) => {
  switch (field) {
    case 'search':
      emit('update:search', '')
      break
    case 'field':
      emit('update:field', '')
      break
  }
  emit('change') // 触发变化事件
}

// 处理选择框的变化事件
const handleChange = () => {
  emit('change') // 触发变化事件
}

// 处理重置事件
const handleReset = () => {
  // 清空所有筛选条件
  emit('update:search', '')
  emit('update:field', '')
  emit('update:sort', '')
  // 发出重置事件
  emit('reset')
  emit('change') // 触发变化事件
}

const handleToStatistics = () => {
  router.push({
    path: '/expertStatisticsIndex',
  })
}
</script>

<style scoped>
.reset-btn {
  background: linear-gradient(90deg, #4f9cff 0%, #1765ad 100%);
  color: #fff;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 14px;
  padding: 0 1.5rem;
  height: 40px;
  border: none;
  transition: background 0.2s, color 0.2s;
}

.reset-btn.ml-0 {
  margin-left: 0px;
}

.reset-btn:hover {
  background: linear-gradient(90deg, #1765ad 0%, #4f9cff 100%);
  color: #fff;
}
</style> 